<template>
	<view class="box">
		<view class="boxBanner">
			<image :src="teamList.teamAvatar" mode=""></image>
		</view>
		<view class="boxTitle">
			<view class="boxTitleOne">{{teamList.teamName}}</view>
			<view class="boxTitleTwo">{{teamList.teamSign}}</view>
			
			<view class="boxTitleContent">{{teamList.teamIntroduction}}</view>
			
			
			<view class="photo_see">
				<view class="photo_seeOne">查看人数<view class="photo_num">{{teamList.lookUpNums}}</view></view>
				<view class="photo_seeOne">制作人数<view class="photo_num">{{teamList.makeUpNums}}</view></view>
			</view>
			
		</view>
		<view class="border"></view>
		<view style="padding-bottom: 80px;">
			<view class="navbar">
				<view class="nav-item" :class="{current: filterIndex == item.id}" v-for="(item, index) in cateGory" :key="index" @click="tabClick(item.id)">{{item.categoryName}}</view>
			</view>
			
			<view v-if="filterIndex == 1">
				<view class="imgList">
					<image v-for="(item,index) in teamList.imageCase" :key="index" :src="item" ></image>
				</view>
			</view>
			
			<view v-if="filterIndex == 2">
				<view class="videoList">
					<video v-for="(item,index) in teamList.videoCase" :key="index" :src="item" @play="pauseOther(item.id,teamList.videoCase)"></video>
				</view>
			</view>
		</view>
		
		
		<view class="btnFooter">
			<view class="checkList">
				<view class="btncheck" @click="navToIndex()">
					<image src="../../static/img/photoslices/sheying_fanhuihome.png" mode=""></image>
					<view>返回首页</view>
				</view>
				
				<view class="btncheck" @click="navToBack()">
					<image src="../../static/img/photoslices/sheying_tuandui.png" mode=""></image>
					<view>摄影团队</view>
				</view>
				
			</view>
			
			<view class="btnwei" @click="navTomake()">
				<view class="btnzhi">委托制作</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				id:"",
				teamList: {},						//商品列表
				total:"",							//商品总数
				page:"",							//几页
				pages:"",							//一共多少页
				limit:"10",							//一页十条
				loadding: false,					//加载
				pullUpOn: true, 					//没有数据
				filterIndex:"1",
				cateGory: [
					{
						id:1,
						categoryName: "图片案例"
					},
					{
						id:2,
						categoryName: "视频案例"
					}
				], 						
			};
		},


		// 页面加载
		onLoad(options) {
			this.id = options.id
			this.loadData();
			
			// 页面只有一个视频可以播放
			var videos = document.getElementsByTagName("video"); 
			console.log(videos)
			for (var i = videos.length - 1; i >= 0; i--) {
			 (function(){
				var p = i;
				videos[p].addEventListener('play',function(){
					pauseAll(p);
				})
			 })()
			}
			function pauseAll(index){
				for (var j = videos.length - 1; j >= 0; j--) {
					if (j!=index) videos[j].pause();
				}
			}
		},
		
		methods: {
			//限制视频只播放一个
			pauseOther(e,Video){
				console.log(e)
				console.log(Video)
				 // 获取当前视频id
				let currentId = e;
				// 获取json对象并遍历, 停止非当前视频
				let trailer = VideoItems;
				for (let i = 0; i < trailer.length; i++) {
				  let temp = trailer[i].ID
				  if (temp !== currentId) {
					   this.$refs[temp][0].pause();
				  }
				}
			},
			
			navToIndex(){
				uni.reLaunch({
					url: `/pages/index/index`
				})
			},
			
			navToBack(){
				uni.navigateBack({
					
				})
			},
			
			navTomake(){
				uni.navigateTo({
					url: `/pages/photography/photoMack?id=${this.id}`
				})
			},
			
			tabClick(index){
				console.log(index)
				this.filterIndex = index;
			},
			
			
			pauseOther(e){ 
				console.log(e)
				 // 获取当前视频id
				let currentId = e;
				// 获取json对象并遍历, 停止非当前视频
				let trailer = this.VideoItems;
				for (let i = 0; i < trailer.length; i++) {
				  let temp = trailer[i].ID
				  if (temp !== currentId) {
					   this.$refs[temp][0].pause();
				  }
				}
			},
				
			// 下拉刷新
			onPullDownRefresh: function() {
				this.page = 1;
				this.pullUpOn = true;
				this.loadding = false;
				this.loadData();
				//停止下拉刷新
				uni.stopPullDownRefresh();
			},
			
			// 上拉加载
			onReachBottom: function() {
				console.log(this.page)
				if (!this.pullUpOn) {
					return;
				}
				this.loadding = true;
				if (this.page == this.pages) {
					this.loadding = false;
					this.pullUpOn = false
				} else {
					++this.page;
					this.loadData();
					this.loadding = false
				}
			},
			
			// 加载商品
			loadData() {
				this.tui.request(
					'/app/team/list?id=' + this.id,
					'GET', 
					{
						page:this.page,
						limit:this.limit,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.total = res.data.total;
						this.page = res.data.page;
						this.pages = res.data.pages;
						this.teamList = res.data;
					}
				}).catch(err => {
					console.log(err)
				});
			},
			// 详情页
			navToDetailPage(item) {
				let id = item;
				uni.navigateTo({
					url: `/pages/photography/photoDetail?id=${id}`
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		// height: 100%;
		background: #FAFAFA;
	}
	.box{
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	.boxBanner{
		width: 100%;
		height: 800upx;
		
		
		image{
			width: 100%;
			height: 100%;
		}
	}
	.boxTitle{
		width: 90%;
		margin: 0 auto;
	}
	.boxTitleOne{
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	.boxTitleTwo{
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 10upx;
	}
	.boxTitleContent{
		margin-top: 28upx;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 39upx;
	}
	.photo_see{
		display: flex;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;	
		margin-top: 20upx;
			
			
		.photo_seeOne{
			display: flex;
			align-items: flex-end;
			padding-right: 10upx;
			
			
			.photo_num{
				color: #333333;
				font-size: 38upx;
			}
			
		}
	}
	.border{
		width: 100%;
		height: 1px;
		background-color: #FAFAFA;
		margin-top: 10upx;
	}
	
	/*头部*/
	.navbar {
		
		display: flex;
		width: 100%;
		height: 80upx;
		// background: #fff;
		// box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;
	
		.nav-item {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: $font-color-dark;
			position: relative;
			margin-left: 15px;
	
			&.current {
				color: #333333;
				font-size: 15px;
	
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #6E609E;
				}
			}
		}
	}
	
	.imgList{
		width: 95%;
		margin: 0 auto;
		margin-top: 20upx;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		
		image{
			width: 47%;
			height: 400upx;
			margin: 9upx;
			border-radius: 10upx;
		}
		
	}
	.videoList{
		width: 95%;
		margin: 0 auto;
		margin-top: 20upx;
		
		video{
			width: 100%;
		}
	}
	
	
	.btnFooter{
		width: 100%;
		height: 98upx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(4, 4, 4, 0.5);
		z-index: 999
	}
	
	
	.checkList{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btncheck{
		text-align: center;
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-right: 15px;
		
		image{
			width: 42upx;
			height: 42upx;
		}
		
		
	}
	.btnwei{
		width: 260upx;
		height: 60upx;
		background: #D14798;
		border-radius: 30upx;
		position: relative;
		
		.btnzhi{
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			right: 30%;
			top: 15%;
		}
	}
	
	
	
</style>
